<template>
  <div>
    <div class="person-center">
      <div class="user-info-box">
        <el-card class="box-card box-abs" shadow="hover">
          <!--背景图片-->
          <div style="height: 66%; width:100%;position: absolute">
            <el-image style="width: 100%; height: 100%" :src="userForm.background_url" fit="none">
              <div slot="error" style="height: 100%"><!--加载失败或未设置图片后显示的图片内容-->
                <el-image :lazy="true" style="width: 100%; height: 100%" fit="none"
                  :src=" require('@/assets/wb (1).jpg')">
                </el-image>
              </div>
            </el-image>
            <el-button plain size="small" @click="backDialogClose = true"
              style="position: absolute;top: 20px;right: 60px;background-color: rgba(255,255,255,0);">
              <i class="el-icon-camera" />
              编辑封面图片
            </el-button>
          </div>
          <div style="position: absolute;width: 100%;top: 48%;">
            <!--头像图片-->
            <el-avatar shape="square" class="avatarImg" :size="140" :src="userForm.avatar_url">
              <img
                :src="`${userForm.avatar_url!=='' ? require('@/assets/avat (2).gif') : userForm.avatar_url}`"
                alt="默认头像" />
            </el-avatar>
            <!--昵称 和 身份-->
            <div style="display: inline-block; position: relative;top: -22px;margin-left: 35px;height: 50%">
              <h1 style="font-size: 45px; user-select:text; margin:0;display: inline">{{ userForm.user_name }}</h1>
              <span style="margin-left: 20px;font-size: 14px;">
                <el-tag type="success" style="position: relative;top: -5px;font-size: 15px;">{{ roles
                }}</el-tag>
              </span>

            </div>
            <el-button plain size="medium" style="position: absolute;right: 60px;bottom: 20px;" @click="editFrom">编辑个人资料
            </el-button>
          </div>
        </el-card>
        <!--用户表单-->
        <el-card class="box-card box-info" shadow="hover">
          <el-form :model="userForm" :disabled="isEdit"  class="personal-form" ref="userForm" inline
            style="height: 100%;padding: 40px 80px;">
            <el-form-item class="el-user-item" style="position: relative">
              <el-avatar :size="80" :src="userForm.avatar_url" alt="头像" style="margin: 0 30px 0 8px;">
                <img
                  :src="`${userForm.avatar_url!=='' ?  require('@/assets/avat (2).gif') : 'userForm.avatar_url '}`"
                  alt="默认头像" />
              </el-avatar>
              <el-button type="success" round plain size="mini" @click="avatarDialogClose = true"
                style="position: absolute;top: 35%;left: 100%;">更改头像
              </el-button>
            </el-form-item>
            <el-form-item class="el-user-item" label="账号" prop="account_number">
              <el-input v-model="userForm.account_number" placeholder="账号信息"></el-input>
            </el-form-item>
            <el-form-item class="el-user-item" label="昵称" prop="user_name">
              <el-input v-model="userForm.user_name" placeholder="昵称信息"></el-input>
            </el-form-item>
            <el-form-item class="el-user-item" label="性别" prop="user_sex">
              <el-select v-model="userForm.user_sex" placeholder="未填" clearable style="width: 206px">
                <el-option v-for="item in sexOption" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-tooltip class="item" effect="light" content="绑定手机后，可使用手机号登录" placement="bottom-end">
              <el-form-item class="el-user-item" label="手机" prop="telephone">
                <el-input v-model="userForm.telephone" placeholder="手机" style="width: 83%"></el-input>
              </el-form-item>
            </el-tooltip>
            <el-form-item class="el-user-item" label="简介" prop="summary">
              <el-input type="textarea" :rows="1" v-model="userForm.summary" style="height: 40px;width: 206px"
                placeholder="填写你的个人简介"></el-input>
            </el-form-item>
            <el-form-item class="el-user-item address" label="地址" prop="user_address">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="userForm.user_address"
                placeholder="地址" style="width: 206px;position: absolute"></el-input>
            </el-form-item>
            <el-row style="text-align: center;margin: 20px auto;">
              <el-button type="primary"  v-if="!isEdit" style="width: 150px; margin:0 4%"
                @click="submitForm('userForm')">保存
              </el-button>
              <el-button round v-if="!isEdit" style="width: 150px; margin:0 4%" @click="resetForm('userForm')">取消
              </el-button>
            </el-row>
          </el-form>
        </el-card>
        <!--上传背景图片-->
      </div>
    </div>

    <!--上传头像-->
    <el-dialog title="上传头像" :visible.sync="avatarDialogClose" width="20%" class="personal-dialog"
      style="text-align: center;">
      <el-upload action="http://127.0.0.1:3000/api/upload" list-type="pictyre"  :drag="true"
        :limit="1" ref="upload1" class="personal-upload" style=" width: 180px;" :on-success="uploadSuccess1" >
        <el-image v-if="this.userForm.avatar_url" :src="this.userForm.avatar_url">
        </el-image>
        <i v-else class="el-icon-plus avatar-uploader-icon"> </i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="avatarDialogClose = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { showuser, updateUser } from '@/api';
export default {
  name: 'KodaiPersonalCenter',

  data () {
    return {
      //用户信息
      userForm: {
        account_number: '',    /*账号*/
        user_name: '',              /*昵称*/
        user_sex: '',                /*性别*/
        telephone: '',           /*手机号*/
        summary: '',                /*简介*/
        user_address: '',          /*地址信息*/
        background_url: '',   /*背景图片链接*/
        avatar_url: 'https://spring-oss.oss-cn-beijing.aliyuncs.com/images/img/avat.gif'            /*头像图片链接*/
      },
      isEdit: true,
      sexOption: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }, {
        value: '保密',
        label: '保密'
      }],
      avatarDialogClose: false,
      roles:JSON.parse(window.localStorage.getItem('stoken')).roles
    };
  },

  mounted () {
    showuser().then(res => {
      this.userForm = res.data.data[0]
    })
  },

  methods: {
    editFrom () {
      this.isEdit = false
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.userForm);
          updateUser(this.userForm).then(res => {
            if (res.data.code === 200) {
              this.isEdit = true
              this.showMessage.call(this, 'success', '修改成功!');
            } else {
              this.showMessage.call(this, 'err', '修改失败!');
            }
          })
        } else {
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.isEdit = true;
    },
    // 上传图片函数
    uploadSuccess1 (res, file) {
      if (res.code === 200) {
        this.showMessage.call(this, 'success', "商品图片上传成功！");
        this.userForm.avatar_url = res.url;
        this.$refs['upload1'].clearFiles();
        this.avatarDialogClose = flase
      } else {
        this.showMessage.call(this, 'error', "商品图片上传失败！");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.person-center {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: 810px;
  border: 1px solid #FFF;
  background: #f5f5f5;
  position: relative;
}

.person-center .user-info-box {
  display: flex;
  justify-content: center;
  position: relative;
}

.person-center .box-abs {
  height: 300px;
  width: 80%;
  min-width: 1100px;
  border-radius: 5px;
  text-align: left;
  // top: 85px;
  position: absolute;
}

.person-center .box-abs .el-card__body,
.box-info .el-card__body {
  height: 100%;
  padding: 0;
}

.person-center .avatarImg {
  border: 3px solid rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  border-radius: 7px;
  margin-left: 3%;
}

.person-center .box-info {
  position: absolute;
  width: 80%;
  min-width: 1100px;
  top: 350px;
  border-radius: 5px;
  text-align: left;
}

.person-center .el-user-item {
  width: 30%;
  min-width: 200px;
}

.person-center .personal-form .el-form-item {
  vertical-align: middle !important;
}

.person-center .personal-form .el-textarea__inner {
  height: 40px;
  min-height: 40px;
}

.person-center .personal-form .el-form-item__content {
  max-width: 206px;
}

.person-center .personal-form .address {
  position: relative;
  width: 40%;
}

.person-center .personal-form .address .el-form-item__content {
  width: 242px;
}


.person-center .personal-form .el-form-item__label {
  width: auto;
}

/*上传背景或头像弹窗样式*/
.person-center .personal-dialog .el-dialog {
  position: absolute;
  top: 30%;
  left: 40%;
  height: auto;
  min-width: 230px;
  margin: 0 !important;
  text-align: center;
  border-radius: 0;
}

.person-center .personal-dialog .el-dialog__header {
  font-weight: 700;
  border-bottom: 1px solid #E3E3E3;
}

.person-center .personal-dialog .el-dialog__footer {
  border-top: 1px solid #E3E3E3;
  padding: 10px 20px;
}

/*上传图片中间的蓝色方框样式*/
::v-deep .el-upload-dragger {
  margin: 0 auto;
  width: 180px !important;
  height: 180px !important;
  line-height: 180px;
}
</style>